import { Component, Vue, Watch } from 'vue-property-decorator'
import style from '../News/News.less'
import { Action } from 'vuex-class'
import { downloadFile } from '@/lib/utils'
import { fileTypes, formatObject } from '@/lib/sealFormat'

@Component
export default class Download extends Vue {
  private pageIndex: number = 1
  private pageSize: number = 10
  private total: number = 0
  private list: any[] = []
  private loading: boolean = false
  private type: any[] = []

  @Action('homepage/queryResourceList') private queryResourceList!: any
  @Action('homepage/downloadResource') private downloadResource!: any

  private render() {
    return (
      <div class={style.container}>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to={{ path: '/homepage/first' }}>
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>下载中心</el-breadcrumb-item>
        </el-breadcrumb>
        <div class={style.content}>
          <p class={style.title}>下载中心</p>
          <p class={style.query}>
            资源分类：{' '}
            <el-checkbox-group v-model={this.type}>
              {fileTypes.map((type: any) => {
                return (
                  <el-checkbox-button label={type.id}>
                    {type.name}
                  </el-checkbox-button>
                )
              })}
              {/* <el-checkbox-button v-for="city in cities" : label="city" :key="city">{{ city }}</el-checkbox-button> */}
            </el-checkbox-group>
          </p>
          <el-table
            data={this.list}
            style="width: 100%"
            v-loading={this.loading}
            ref="table"
          >
            <el-table-column
              prop="type"
              label="资源分类"
              width="150px"
              // show-overflow-tooltip
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return (
                      <p
                        style={{
                          color:
                            formatObject(fileTypes, scope.row.resourceType)
                              .color || '#BABABA',
                        }}
                      >
                        {formatObject(fileTypes, scope.row.resourceType)
                          .value || '-'}
                      </p>
                    )
                  },
                },
              }}
            />
            <el-table-column
              prop="title"
              label="标题"
              width="500px"
              // show-overflow-tooltip
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return (
                      <p
                        class={{
                          'over-hidden': true,
                          [style.newsTitle]: true,
                        }}
                        title={scope.row.title}
                      >
                        {scope.row.isTop && <p class={style.isTop}>推荐</p>}
                        {scope.row.title}
                      </p>
                    )
                  },
                },
              }}
            />
            <el-table-column
              align="left"
              prop="time"
              width="280px"
              label="时间"
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return <p class={style.time}>{scope.row.publishTime}</p>
                  },
                },
              }}
            />
            <el-table-column
              prop="title"
              label="操作"
              // show-overflow-tooltip
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return (
                      <el-button
                        type="text"
                        onClick={() => this.download(scope.row)}
                      >
                        下载
                      </el-button>
                    )
                  },
                },
              }}
            />
          </el-table>
          {this.list && this.list.length > 0 && (
            <el-pagination
              class={{ [style.pagination]: true }}
              onSize-change={this.handleSizeChange}
              onCurrent-change={this.handleCurrentChange}
              current-page={this.pageIndex}
              page-sizes={[10, 20, 30]}
              page-size={this.pageSize}
              layout="total, sizes, prev, pager, next, jumper"
              total={this.total}
              pager-count={5}
            />
          )}
        </div>
      </div>
    )
  }

  private moreHandler() {
    this.$emit('more')
  }

  private handleSizeChange(val: number) {
    this.pageIndex = 1
    this.pageSize = val
    this.queryList()
  }

  private handleCurrentChange(val: number) {
    this.pageIndex = val
    this.queryList()
  }

  private queryList() {
    this.loading = true
    this.queryResourceList({
      pageIndex: this.pageIndex,
      pageNumber: this.pageSize,
      resourceTypeList: this.type,
    })
      .then((res: any) => {
        this.loading = false
        this.list = res.list
        this.total = res.total
      })
      .catch(() => {
        this.loading = false
      })
  }
  private async query() {
    this.pageIndex = 1
    this.queryList()
  }
  private mounted() {
    this.query()
  }

  private download(row: any) {
    this.downloadResource({ id: row.id }).then((res: any) => {
      if (!res) {
        this.$message.error('文件不存在')

        return
      }
      downloadFile(res, row.title)
    })
  }

  @Watch('type')
  private typeChange(val: any[]) {
    this.query()
  }
}
